<template>
  <div class="app-container">
    <el-row >
      <el-card class="box-card">
        <div>
          <span @click="$router.back(-1)"><i class="el-icon-back">返回</i></span>
        </div>
      </el-card>
    </el-row>
    <el-row :gutter="10">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-button type="danger" icon="el-icon-edit" @click="disabled = false">打 分</el-button>
          <el-button type="info" icon="el-icon-close" @click="disabled = true">取 消</el-button>
          <el-button type="success" icon="el-icon-check" @click="scoreSubmit">提 交</el-button>
        </div>
        <div>
          <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="actName" label="活动名称" width="280">
            </el-table-column>
            <el-table-column prop="actState" label="活动状态" width="280">
              <template slot-scope="scope">
                <el-tag type="success" v-if="scope.row.actState ==1">进行中</el-tag>
                <el-tag type="success" v-if="scope.row.actState ==2">已结束</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="userName" label="参加者" width="180">
            </el-table-column>
            <el-table-column prop="activityScore" label="得分情况" >
              <template slot-scope="scope">
                <el-rate
                  v-model="scope.row.activityScore"
                  :max=10
                  allow-half
                  :colors="colors"
                  :low-threshold=5
                  :disabled="disabled"
                  :high-threshold=7.5
                  @change="scoreChange(scope.row)"
                  show-score
                  text-color="#ff9900"
                  score-template="{value}">
                </el-rate>
              </template>
            </el-table-column>
            <el-table-column prop="actResultName" label="得奖情况" width="280">
            </el-table-column>
          </el-table>
        </div>
      </el-card>
    </el-row>
  </div>
</template>

<script>
  import {scoring, getActUsers,updateActState} from "@/api/manage/activity";


  export default {
    name: "actrate",
    data() {
      return {
        tableData: [],
        colors: ['#67C23A', '#F7BA2A', '#F56C6C'],
        disabled: true,
        ids: [],
        scoreObj: [],
        actId: null,
      }
    },
    created() {
      this.actId = this.$route.query.actId
      this.getUserList()

    },
    methods: {
      getUserList() {
        getActUsers(this.actId).then(res => {
          this.tableData = res.data
        })
      },
      scoreChange(row) {
        // if (this.ids.includes(row.id)) {
        //   let index = this.scoreObj.findIndex(item => {
        //     if (item.id == row.id) {
        //       return true;
        //     }
        //   })
        //   this.scoreObj.splice(index, 1)
        // } else {
        //   this.ids.push(row.id)
        // }
        // let actUser = {id: row.id, activityScore: row.activityScore}
        // this.scoreObj.push(actUser)
        if(row.activityScore == 10){
          row.activityResult = 1
          row.actResultName = '一等奖'
        }else if(7.5 <= row.activityScore && row.activityScore < 10){
          row.activityResult = 2
          row.actResultName = '二等奖'
        }else if(5 <= row.activityScore && row.activityScore < 7.5){
          row.activityResult = 3
          row.actResultName = '三等奖'
        }else {
          row.activityResult = 0
          row.actResultName = '参与奖'
        }
      },
      scoreSubmit(){
        updateActState(this.actId)
        scoring(this.tableData).then(res => {
          this.disabled = true
          this.msgSuccess("评分已提交");
        })
      },
    }
  }
</script>

<style scoped>
  .el-row {
    margin-bottom: 10px;
  }
</style>
